<template>
	<div id="top">
		<version></version>
		<!--显示trx提示层-->
		<div class="trx-tip-top" v-show="tornlinkToken.trxBalance<100.00 && tornlinkToken.trxBalance >-1 && isLogin">
			{{LangSet(['TRX余额:',' TRX balance:'])}}{{tornlinkToken.trxBalance}}({{LangSet(['请注意TRX不足100','Not enough'])}})
		</div>
		<!-- 导航 大屏不显示-->
		<nav class="top hidden-xs hidden-sm">
			<div class="logo flex1"><img src="../assets/logo.png" alt=""></div>
			<div class="flex2">
				<ul class="navappend nav hidden-xs hidden-sm">
					<li v-for="(item,index) in lang_nav" :key="index">
						<!--<a :href="item.url" :target="item.target">{{item.title}}</a>-->
						<router-link :to="item.url">{{item.title[lp]}}</router-link>
					</li>
				</ul>
			</div>
			<div class="lang-group flex1 flex-jc-fe" >
				<img src="../assets/icon_cn.png" class="lang" :class="{'alpha50':lp!=0}" alt="" @click="SET_LP('cn')">
				<img src="../assets/icon_en.png" class="lang" :class="{'alpha50':lp!=1}" alt="" @click="SET_LP('en')">
				<wallet></wallet>
				<el-badge is-dot :hidden="hideDabge" v-if="isLogin">
					<a href="#/uc" ><i class="fa fa-user-circle-o c-fff f32 ml5"></i></a>
				</el-badge>

			</div>
		</nav>

		<!--独立的整块顶部手机版，包括logo，导航，钱包按钮-->
		<div class="visible-xs visible-sm">

			<div class="topMobile">
				<div class="logo">
					<router-link exact-active-class="none" to="/main/index"><img src="../assets/logo.png" alt=""></router-link>
				</div>
				<div class="menuIcon" @click="drawer=true">
					<i class="el-icon-s-fold"></i>
				</div>
			</div>
			<div style="margin:0px auto;max-width:300px;">
				<wallet></wallet>
			</div>
		</div>


		<!--抽屉菜单-->
		<el-drawer title=""  size="70%" :visible.sync="drawer" direction="rtl" :with-header="true">
			<div class="draw-list">
				<!--<div class="draw-list-row">-->
				<!--	<div class="logo"><img src="../assets/logo.png" alt=""></div>-->
				<!--</div>-->
				<!--钱包-->
				<div class="draw-list-row">
					<div class="wallet">
						<div  class="link" v-if="!isLogin" >{{LangSet(['你沒有鏈接錢包',"You don't have  link to the wallet"])}}</div>
						<div  class="link linked" v-else>
							<div class="flex-jc-sb flex-ai-c">
								<img class="wallt-logo" src="/images/icon_XG.png" alt="">
								<router-link to="/uc/" class="token">{{tornlinkToken.token|token}}
									<i class="fa fa-user-circle-o c-666 f24"></i>
								</router-link>
							</div>
						</div>

					</div>
				</div>
				<!--语言-->
				<div class="draw-list-row">
					<div class=" lang-group-draw">
						<img src="../assets/icon_cn.png"  :class="{'alpha50':lp!=0}" alt="" @click="SET_LP('cn')">
						<img src="../assets/icon_en.png"  :class="{'alpha50':lp!=1}" alt="" @click="SET_LP('en')">
					</div>
				</div>
				<!--导航-->
				<div class="draw-list-row">
					<div class="nav-row" v-if="isLogin">
						<router-link to="/uc/"><i class="fa fa-user-circle-o c-666 f18"></i>用户中心</router-link>
					</div>
					<div class="nav-row" v-for="(item,index) in lang_nav" :key="index">
						<router-link :to="item.url">{{item.title[lp]}}</router-link>

					</div>
				</div>

			</div>
		</el-drawer>
	</div>
</template>

<script>

	//引用资源
	import { lang_wallet } from '@/libs/lang'
	import { mixins } from '@/mixins/mixins'
	import { mapState,mapMutations,mapGetters } from 'vuex'
	import { lang_nav } from '@/libs/lang'
	import { SET_LP } from '@/store/mapMutations'


	//组件
	import wallet from '@/components/wallet'
	import banner from "@/components/banner";
	import version from "@/components/version";

	//导出
	export default {
		name:"top",
		components:{ wallet,banner,version },
		mixins:[mixins],
		//参数传递
		props:{},
		data () {
			return {
				lang:Object.freeze(lang_wallet),
				lang_nav   : Object.freeze(lang_nav),
				timeHandler: null, //定时器
				drawer     : false,
			}
		},
		computed:{
			...mapState(['hideDabge']),
			...mapGetters(['isLogin'])
		},
		methods:{
			...mapMutations([SET_LP]),//映射方法

		},
		created () {

		},
		beforeDestroy () {
			window.clearInterval(this.timeHandler)
		},
		watch: {
			$route (to, from) {
				this.drawer = false //切换路由时，就关闭抽屉
			},
		},
		filters:{
			//token縮減
			token (t, splic = 4) {
				return t.slice(0, splic) + '...' + t.slice(-splic)
			},
		}
	}
</script>

<style lang="less" >

	/*公共变量*/
	@import '~@/assets/global.less';

	/*导航*/
	.top {
		width:100%;padding:10px 20px;display: flex;align-items: center;justify-content: space-between;
		box-sizing: border-box;

	}
	.top .logo {}
	.top .logo img{height:60px}
	.top  ul.nav {display: flex;align-items: center;justify-content: center}
	.top  ul.nav li{margin-right: 5px;}
	.top  ul.nav li a{color:#fff;font-size:16px;font-weight:500;padding:10px 20px;border-radius: 50px;opacity: 1}
	.top  ul.nav li a:hover,.top  ul.nav li a.hover,.router-link-exact-active{color:#fff;background:@blue;opacity: 1}

	.lang-group{display:flex;align-items: center;justify-content: flex-end} /*语言切换*/
	.lang-group img.lang {height: 24px;cursor: pointer;transition: all 0.5s}
	.lang-group img.lang:nth-child(n+2){margin-left: 5px;}


	/*顶部所有手机版*/
	.topMobile {padding:20px 15px;display: flex;align-items: center;justify-content: space-between}
	.topMobile .logo{}
	.topMobile .logo img{height: 48px;}
	.topMobile .menuIcon{ padding:6px;background-color: rgba(255,255,255,0.7);border-radius:5px}
	.topMobile .menuIcon i{font-size: 24px;}


	/*我的钱包*/
	.my-wallet {padding:20px 0px 0px;}
	.my-wallet .logo {padding:10px 0px;}
	.my-wallet .logo img{height: 70px}
	.my-wallet .wallet-item{
		margin-top: 30px;padding:20px; box-shadow: 5px 5px 20px rgba(70, 75, 150, 0.2);border-radius: 10px;
		cursor: pointer;
	}

	/*trx数量提示层*/
	.trx-tip{
		width:100%;max-width: 350px;color:#ff0000;font-size: 14px;font-weight: bold;
		padding:10px 0px;text-align: center;background-color: rgba(255,255,255,0.8);border-radius: 20px;margin:10px auto 0px;
	}
	.trx-tip-top {
		width:100%;color:#333;font-size: 14px;
		padding:10px 0px;text-align: center;background-color:#fcde63;margin:0px auto 0px;
	}

	//抽屉菜单
	.draw-list {
		padding:0px 20px 20px; height:100vh;overflow-y: scroll;background-color: #fff;

		.draw-list-row {
			padding:0px 0px 15px;box-sizing:border-box;


		}
		.draw-list-row:nth-child(-n+2) {border-bottom:1px solid #eee;}
		.draw-list-row:nth-child(n+2) {margin-top: 15px;}

		.logo {width:100%;display: flex;align-items: center;justify-content: center}
		.logo img {height: 38px;}
		//钱包
		.wallet {width: 100%;margin-top:-0px;display: flex;align-items: center;justify-content: flex-start}
		.wallet .linked{width: 100%}
		.wallet .linked .wallt-logo{height: 30px;}
		.wallet .linked .token {font-size:16px;color: @blue}
			//语言
		.lang-group-draw {width:100%;display: flex;align-items: center;justify-content: flex-start}
		.lang-group-draw img{height: 30px;margin-right: 10px;}
		//导航

		.nav-row a{width: 100%;color: #333;font-size:16px;display: block;padding:15px 0px;border-radius:5px;}
		//.nav-row a:hover,.nav-row .router-link-exact-active{color:#fff;background-color: @blue; }
		.nav-row a:hover,.nav-row .router-link-exact-active{color:@blue;background-color: #fff; }
	}


	/*********************************************适应************************************/
	@media screen and (max-width: @MINSCREEN){
		.top {padding: 5px 10px;}
		/*语言切换*/
		.lang-group{text-align: center;padding:10px 0px;position: absolute;top: 0px;right: 10px;}
		.lang-group img.lang {height: 30px; margin:0px 5px;}
		.lang-group img.lang:nth-child(n+2){margin-left: 0px;}

		/*我的钱包*/
		.my-wallet {padding:0px}
	}
</style>
